<template>
  <div class="container" :style="bgColorStyle">
    <header>
      <img :src="bgSrc" alt="背景图">
      <div class="logo" :style="fontStyle">By jmh65535</div>
      <div class="title" :style="fontStyle">电商平台实时监控系统</div>
      <div class="right">
        <img :src="themeBtnSrc" alt="切换按钮" @click="handleClickTheme">
        <span class="time" :style="fontStyle">{{date}}</span>
      </div>
    </header>
    <div class="wrapper">
      <section class="left">
        <div :class="['top', isFullScreen.trend? 'fullscreen': '']">
          <Trend ref="trend_ref"></Trend>
          <span :class='["fullscreen-icon", fullScreenIcon]' @click="handleFullScreen('trend')"></span>
        </div>
        <div :class="['bottom', isFullScreen.seller? 'fullscreen': '']">
          <Seller ref="seller_ref"></Seller>
          <span class="fullscreen-icon icon iconfont icon-fullscreen-expand" @click="handleFullScreen('seller')"></span>
        </div>
      </section>
      <section class="mid">
        <div :class="['top', isFullScreen.map? 'fullscreen': '']">
          <Map ref="map_ref"></Map>
          <span class="fullscreen-icon icon iconfont icon-fullscreen-expand" @click="handleFullScreen('map')"></span>
        </div>
        <div :class="['bottom', isFullScreen.rank? 'fullscreen': '']">
          <Rank ref="rank_ref"></Rank>
          <span class="fullscreen-icon icon iconfont icon-fullscreen-expand" @click="handleFullScreen('rank')"></span>
        </div>
      </section>
      <section class="right">
        <div :class="['top', isFullScreen.hotproduct? 'fullscreen': '']">
          <Hotproduct ref="hotproduct_ref"></Hotproduct>
          <span class="fullscreen-icon icon iconfont icon-fullscreen-expand" @click="handleFullScreen('hotproduct')"></span>
        </div>
        <div :class="['bottom', isFullScreen.stock? 'fullscreen': '']">
          <Stock ref="stock_ref"></Stock>
          <span class="fullscreen-icon icon iconfont icon-fullscreen-expand" @click="handleFullScreen('stock')"></span>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import config from '@/config'
import { getDate } from '@/utils'
import { mapState } from 'vuex'
import Seller from '@/components/Seller.vue'
import Rank from '@/components/Rank.vue'
import Trend from '@/components/Trend.vue'
import Stock from '@/components/Stock.vue'
import Map from '@/components/Map.vue'
import Hotproduct from '@/components/Hotproduct.vue'

export default {
  name: 'ScreenPage',
  data() {
    return {
      fullScreenIcon: 'icon iconfont icon-fullscreen-expand', // 全屏缩放按钮icon变量
      isFullScreen: {// 是否全屏
        seller: false,
        rank: false,
        map: false,
        stock: false,
        hotproduct: false,
        trend: false
      },
      bgSrc: '/static/img/header_border_dark.png', // 背景图
      themeBtnSrc: '/static/img/qiehuan_dark.png', // 切换背景按钮图
      date: ''
    }
  },
  created() {
    this.date = getDate()
    this.ws = this.$ws.getInstance()
    // 注册回调函数 等服务器回应后调用
    this.ws.registerCallback('fullScreen', this.setFullScreen)
    this.ws.registerCallback('changeTheme', this.changeTheme)
    // 时间显示
    let timer = null
    if (timer) {
      clearInterval(timer)
      timer = null
    }
    setInterval(() => {
      // this.$refs.clock_ref.innerHTML = getDate()
      this.date = getDate()
    }, 1000)
  },
  computed: {
    ...mapState(['theme']),
    fontStyle() {
      return {
        color: config[this.theme].fontColor
      }
    },
    bgColorStyle() {
      return {
        backgroundColor: config[this.theme].bgColor
      }
    }
  },
  methods: {
    // 全屏按钮点击 发送请求
    handleFullScreen(chartName) {
      this.fullScreenIcon = this.isFullScreen ? 'icon iconfont icon-fullscreen-shrink' : 'icon iconfont icon-fullscreen-expand'
      this.ws.send(JSON.stringify({
        action: 'fullScreen',
        socketType: 'fullScreen',
        chart: chartName,
        value: this.isFullScreen
      }))
    },
    // 全屏回调函数
    setFullScreen(data) {
      this.isFullScreen[data] = !this.isFullScreen[data]
      this.$nextTick(() => {
        this.$refs[data + '_ref'].adaptChart()
      })

    },
    // 切换主题点击函数 发送请求 
    handleClickTheme() {
      console.log('handleClickTheme')
      this.ws.send(JSON.stringify({
        action: 'changeTheme',
        socketType: 'changeTheme',
        chart: '',
        value: ''
      }))
    },
    // 切换主题回调函数
    changeTheme(data) {
      this.$store.commit('CHANGE_THEME')
      this.bgSrc = config[this.theme].bgSrc
      // this.themeBtnSrc = config[this.theme].themeBtnSrc
    },
  },
  components: {
    Seller,
    Rank,
    Trend,
    Stock,
    Map,
    Hotproduct
  }
}
</script>
<style lang="scss">
// 全屏样式的定义
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 9999 !important;
}

header {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80px;

  z-index: 1;
}
header > img {
  position: absolute;
  width: 100%;
  flex: none;
}
.logo,
.title,
.time {
  color: #fff;
}
.logo {
  font-size: 18px;
  margin-left: 20px;
}
.title {
  font-size: 20px;
  padding-left: 90px;
}
.time {
  margin-right: 20px;
  padding-left: 10px;
}
.right > img {
  position: relative;
  width: 30px;
  z-index: 100;
  cursor: pointer;
}
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  box-sizing: border-box;
  padding: 80px 0 50px 0;

  .fullscreen-icon {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 100;
    font-size: 20px;
    color: #fff;
  }
  .top,
  .bottom {
    position: relative;
  }
  .left {
    display: flex;
    flex-direction: column;
    width: 28%;
    margin: 0 0 0 20px;
    .top {
      height: 60%;
    }
    .bottom {
      height: 40%;
      margin-top: 20px;
    }
  }
  .mid {
    display: flex;
    flex-direction: column;
    width: 41%;
    margin: 0 0 0 20px;
    .top {
      height: 66.66%;
    }
    .bottom {
      height: 33.33%;
      margin-top: 20px;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    width: 31%;
    margin: 0 20px 0 20px;
    .top {
      height: 55%;
    }
    .bottom {
      height: 45%;
      margin-top: 20px;
    }
  }
}
</style>
